<template>
  <el-dialog
    title="机台应用列表"
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    width="800px"
    :before-close="handleBeforeClose"
  >
    <div class="machine-application-container">
      <!-- 选择机台应用对应的营业准备规则 -->
      <div class="rule-selection">
        <h3>选择机台应用对应的营业准备规则</h3>
        <div class="selection-area">
          <el-select
            v-model="selectedStore"
            filterable
            placeholder="请选择门店"
            clearable
          >
            <el-option
              v-for="store in stores"
              :key="store.value"
              :label="store.label"
              :value="store.value"
            />
          </el-select>

          <el-select
            v-model="selectedMachine"
            filterable
            placeholder="请选择机台"
            clearable
          >
            <el-option
              v-for="machine in machines"
              :key="machine.value"
              :label="machine.label"
              :value="machine.value"
            />
          </el-select>

          <el-button type="primary" @click="addMachine">添加机台</el-button>
        </div>
      </div>

      <!-- 查询机台 -->
      <div class="search-section">
        <h3>查询机台</h3>
        <div class="search-box">
          <el-input
            v-model="searchKey"
            placeholder="请输入机台唯一识别码"
            clearable
          />
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>

      <!-- 机台列表表格 -->
      <div class="machine-table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column prop="storeName" label="门店名称" min-width="140" />
          <el-table-column
            prop="uniqueCode"
            label="唯一识别码"
            min-width="140"
          />
          <el-table-column
            prop="screenCode"
            label="屏幕识别码"
            min-width="130"
          />
          <el-table-column
            prop="machineType"
            label="所属机型"
            min-width="150"
          />
          <el-table-column label="操作" min-width="80" align="center">
            <template #default="scope">
              <el-button type="text" @click="viewMachine(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Close } from "@element-plus/icons-vue";

const dialogVisible = ref(false);
const props = defineProps(["modelValue"]);

const closeDialog = () => {
  emit("update:visible", false);
  emit("close");
};

// 表格数据
const tableData = ref([
  {
    storeName: "LINLEE-天河正佳广场店",
    uniqueCode: "be9a338cee7f41d8956ab46a70255043",
    screenCode: "7a334e18cbfa",
    machineType: "PRS-I-18-U-G2-TC2",
  },
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(1);

// 查询相关
const searchKey = ref("");
const stores = ref([
  { value: "store1", label: "LINLEE-天河正佳广场店" },
  { value: "store2", label: "LINLEE-天河城店" },
]);
const machines = ref([
  { value: "machine1", label: "机台1" },
  { value: "machine2", label: "机台2" },
]);
const selectedStore = ref("");
const selectedMachine = ref("");

// 方法
const addMachine = () => {
  if (!selectedStore.value || !selectedMachine.value) {
    ElMessage.warning("请选择门店和机台");
    return;
  }
  // 添加机台逻辑
  ElMessage.success("添加机台成功");
};

const handleSearch = () => {
  // 查询逻辑
  console.log("搜索关键词:", searchKey.value);
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  // 重新加载数据
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 重新加载数据
};

const viewMachine = (row) => {
  // 查看机台详情
  ElMessageBox.alert(`查看机台: ${row.uniqueCode}`, "机台详情", {
    confirmButtonText: "确定",
  });
};
</script>

<style scoped>
.machine-application-container {
  padding: 12px 20px 0;
  background-color: #fff;
  border-radius: 4px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  font-size: 20px;
  padding: 0;
  color: #666;
}

.rule-selection,
.search-section {
  margin-bottom: 20px;
}

.selection-area {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.search-box {
  display: flex;
  margin-top: 10px;
  gap: 10px;
}

.selection-area :deep(.el-select) {
  width: 220px;
}

.search-box :deep(.el-input) {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}
</style>
